<template>
  <el-container style="width:1850px;height:1070px;background-color: #06134A" onscroll="false">

    <el-header style="height: 10.5%" class="headerbackgroud">
      <div style="color: white;font-size: 30px;text-align: center;margin-top: 20px;margin-left: 70px">特种设备检测监测云平台</div>
      <el-card style="width:150px;height:50px;text-align:left;margin-left:80px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 6px;margin-top: -10px">
          大连特种设备工业有限公司
        </div>
      </el-card>
      <el-card style="width:127px;height:60px;align-items:right;margin-left:1600px;margin-top:-30px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 2px;margin-top: -8px">
          {{dateFormat(date)}}
        </div>
      </el-card>
      <el-card style="width:120px;height:50px;align-items:right;margin-left:1450px;margin-top:-60px;border-radius:30px;background-color: #7d93ea">
        <div style="color: white;margin-left: 8px;margin-top: -8px">
          政府部门 云服务
        </div>
      </el-card>
    </el-header>

    <el-main style="height: 100%">
      <el-header style="margin-top: 10px; margin-left: 0px;">
        <el-col span="3" style="border: #4AB7BD 3px solid;	box-shadow:0px 0px  10px 5px #9E9E9E;">
          <div style="margin-left: 10px" class="select">
            省份
            <el-select v-model="location" placeholder="请选择" style="width: 150px" popper-append-to-body="false" class="hello">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col span="4"style="border: #4AB7BD 3px solid;	box-shadow:0px 0px  10px 5px #9E9E9E;">
          <div style="margin-left: 10px" class="select">
            城市 &nbsp;
            <el-select v-model="city" placeholder="请选择" style="width: 200px" popper-append-to-body="false" class="hello" >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col span="5" style="width: 450px;border: #4AB7BD 3px solid;	box-shadow:0px 0px  10px 5px #9E9E9E;">
          <div style="margin-left: 10px" class="select">
            政府部门 &nbsp;
            <el-select v-model="enterprises" placeholder="请选择" style="width: 300px" popper-append-to-body="false" class="hello">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <!--<el-button class="filter-item" type="primary" icon="el-icon-search" @click="updateTemperatureChartAndTable">确定</el-button>-->
          </div>
        </el-col>
      </el-header>

      <el-main style="width: 100%;height: 56%">

        <el-container style="width: 100%;height: 100%">

        <el-aside style="width: 50% ;height: 100%">
          <el-row style="width: 95%;height: 48%">
            <PieChart></PieChart>
          </el-row>
          <el-row style="width: 95%;height: 48%">
            <PieChart2></PieChart2>
          </el-row>
        </el-aside>

        <el-main style="width: 50%;height: 100%">
          <!--<div id="map" style="height: 90%;width: 90%;margin-left: 2%"/>-->

          <baidu-map  id="allmap" ref="allmap" center="重庆市" :zoom="zoom" :scroll-wheel-zoom="true" ak="tMKUDeTdNWyNefPuZ5vLWHLr4k540dl2" style="margin-left: 8%" @click="getPoint">
            <bm-view style="width: 100%; height:100px; flex: 1"></bm-view>
            <bm-local-search :keyword="keyword"  zoom="12.8" style="display: none"></bm-local-search>
          </baidu-map>
        </el-main>

        </el-container>
      </el-main>

      <el-footer style="width: 100%;height: 36%">

        <el-table :data="tableData" style="width: 100%;height: 100%" :row-style="getRowClass"
                  :header-cell-style="{background:'#101E44',color:'#606266'}" :fit="true">
          <el-table-column
            prop="one"
            label="序列"
            width="100">
          </el-table-column>
          <el-table-column
            prop="two"
            label="设备编号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="three"
            label="区县">
          </el-table-column>
          <el-table-column
            prop="four"
            label="所在单位">
          </el-table-column>
          <el-table-column
            prop="five"
            label="类型">
          </el-table-column>
          <el-table-column
            prop="six"
            label="风险评估">
          </el-table-column>
          <el-table-column
            prop="seven"
            label="定期检验">
          </el-table-column>
          <el-table-column
            prop="eight"
            label="安全隐患">
          </el-table-column>
          <el-table-column
            prop="nine"
            label="隐患处置">
          </el-table-column>
          <el-table-column
            prop="nine"
            label="应急预案">
          </el-table-column>
        </el-table>
      </el-footer>
    </el-main>

  </el-container>
</template>

<script>
  import ElContainer from "element-ui/packages/container/src/main"
  import ElAside from "element-ui/packages/aside/src/main"
  import ElHeader from "element-ui/packages/header/src/main"
  import ElMain from "element-ui/packages/main/src/main"
  import PieChart from './components/PieChart'
  import PieChart2 from './components/PieChart2'
  import BarChart from './components/BarChart'
  import BarChart2 from './components/BarChart2'

  import { get, get as userType, del, dels } from '@/api/sys/connSysAuthApi'
  import { parseTime } from '@/utils'
  import { req } from '@/api/base/BaseApi'

  import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
  import BmScale from 'vue-baidu-map/components/controls/Scale'
  import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
  import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
  import BmMarker from 'vue-baidu-map/components/overlays/Marker'
  import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
  import BmLocalSearch from'vue-baidu-map/components/search/LocalSearch'

  export default {
    name: 'index',
    components: { BarChart2, BarChart, PieChart , PieChart2, BaiduMap,
      BmScale,
      BmNavigation,
      BmMarkerClusterer,
      BmMarker,
      BmInfoWindow,
      BmLocalSearch },
    comments: {
      ElMain,
      ElHeader,
      ElAside,
      ElContainer,
      PieChart,
      PieChart2,
      BarChart,
      BarChart2
    },
    methods: {
      dateFormat(time) {
        var date = new Date(time)
        var year=date.getFullYear()
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        var month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1
        var day=date.getDate()<10 ? "0"+date.getDate() : date.getDate()
        var hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours()
        var minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes()
        var seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds()
        // 拼接
        return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds
      },
      tableRowStyle({ row, rowIndex }) {
        return 'background-color: #02152f;color: #fff'
      },
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background-color: #2ec7c9;color: #fff;font-weight: 500;'
        }
      },
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      getRowClass({ row, column, rowIndex, columnIndex }) {
        return 'background:#06134A;color:#fff;'
      },
      getPoint(e){    //点击地图获取一些信息，
        this.show = true;
        this.postionMap.lng = e.point.lng;     //通过  e.point.lng获取经度
        this.postionMap.lat = e.point.lat;     //通过  e.point.lat获取纬度
        this.add.jd = e.point.lng;
        this.add.wd = e.point.lat;
        this.zoom = e.target.getZoom()

        let geocoder= new BMap.Geocoder();  //创建地址解析器的实例
        geocoder.getLocation(e.point,rs=>{
          this.add.site = rs.address;
          //地址描述(string)=
          // console.log(rs.address);    //这里打印可以看到里面的详细地址信息，可以根据需求选择想要的
          // console.log(rs.addressComponents);//结构化的地址描述(object)
          // console.log(rs.addressComponents.province); //省
          // console.log(rs.addressComponents.city); //城市
          // console.log(rs.addressComponents.district); //区县
          // console.log(rs.addressComponents.street); //街道
          // console.log(rs.addressComponents.streetNumber); //门牌号
          // console.log(rs.surroundingPois); //附近的POI点(array)
          // console.log(rs.business); //商圈字段，代表此点所属的商圈(string)
        });
      },
      infoWindowClose () {
        this.show = false
      },
      infoWindowOpen () {
        //这里有个问题纠结了很久，百度的信息窗口默认有个点击其他地方就消失的事件，我没有找到
        //并且信息窗口点击一次显示，一次消失
        //于是我加了一个100毫秒的定时器，保证每次点击地图都可以展示信息窗口
        setInterval(()=>{
          this.show = true
        },100)
      }
    },
    data() {
      return {
        keyword: '',  //搜索框关键词
        zoom: 12.8,   //放大比例
        date: new Date(),
        options1: [{
          value: '安徽省',
          label: '安徽省'
        }, {
          value: '辽宁省',
          label: '辽宁省'
        }, {
          value: '广东省',
          label: '广东省'
        }],
        location: '',
        options2: [{
          value: '铜陵市',
          label: '铜陵市'
        }],
        city: '',
        options: [{
          value: '铜陵市特种设备技术监督局',
          label: '铜陵市特种设备技术监督局'
        }],
        enterprises: '',
        tableData: [{
          one: '1',
          two: 'KQ13063',
          three: '义安区',
          four: '铜陵华源麻业有限',
          five: '桥式',
          six: '高风险',
          seven: '已检',
          eight: '使用年限长',
          nine: '查看',
          ten: '查看'
        }, {
          one: '2',
          two: 'KQ13064',
          three: '市辖区',
          four: '铜陵有色金属集团',
          five: '门式',
          six: '高风险',
          seven: '已检',
          eight: '吨位大',
          nine: '查看',
          ten: '查看'
        }, {
          one: '3',
          two: 'KQ13065',
          three: '郊区',
          four: '安徽高源再生资源',
          five: '桥式',
          six: '中风险',
          seven: '已检',
          eight: '作业环境',
          nine: '查看',
          ten: '查看'
        }, {
          one: '4',
          two: 'KQ13063',
          three: '铜官区',
          four: '铜陵市亿邦置业有',
          five: '门式',
          six: '中风险',
          seven: '已检',
          eight: '技术文件',
          nine: '查看',
          ten: '查看'
        }, {
          one: '5',
          two: 'KQ13063',
          three: '铜官区',
          four: '铜陵市亿邦置业有',
          five: '桥式',
          six: '中风险',
          seven: '未检',
          eight: '技术文件',
          nine: '查看',
          ten: '查看'
        }, {
          one: '6',
          two: 'KQ13063',
          three: '铜官区',
          four: '铜陵市亿邦置业有',
          five: '门式',
          six: '中风险',
          seven: '已检',
          eight: '技术文件',
          nine: '查看',
          ten: '查看'
        }]
      }
    },
    filters: {
      userTypeFilter(type) {
        let typeText = type
        userTypes.forEach((val) => {
          if (type === val.value) {
            typeText = val.name
          }
        })
        return typeText
      },
      menuFilter(ids) {
        let length = 0
        if (ids) {
          length = ids.length
        }
        return length
      },
      dateTimeFilter(time) {
        return parseTime(time)
      }
    },
    mounted() {
      let _this = this //声明一个变量指向vue实例this,保证作用域一致
      this.timer = setInterval(function() {
        _this.date = new Date()//修改数据date
      }, 1000)
      this.$nextTick(() => {
        var mapName = "china";
        var data = [
          { name: "北京", value: 177 },
          { name: "天津", value: 42 },
          { name: "河北", value: 102 },
          { name: "山西", value: 81 },
          { name: "内蒙古", value: 47 },
          { name: "辽宁", value: 67 },
          { name: "吉林", value: 82 },
          { name: "黑龙江", value: 66 },
          { name: "上海", value: 24 },
          { name: "江苏", value: 92 },
          { name: "浙江", value: 114 },
          { name: "安徽", value: 109 },
          { name: "福建", value: 116 },
          { name: "江西", value: 91 },
          { name: "山东", value: 119 },
          { name: "河南", value: 137 },
          { name: "湖北", value: 116 },
          { name: "湖南", value: 114 },
          { name: "重庆", value: 91 },
          { name: "四川", value: 125 },
          { name: "贵州", value: 62 },
          { name: "云南", value: 83 },
          { name: "西藏", value: 9 },
          { name: "陕西", value: 80 },
          { name: "甘肃", value: 56 },
          { name: "青海", value: 10 },
          { name: "宁夏", value: 18 },
          { name: "新疆", value: 67 },
          { name: "广东", value: 123 },
          { name: "广西", value: 59 },
          { name: "海南", value: 14 }
        ];
        var geoCoordMap = {};
        var toolTipData = [
          {
            name: "北京",
            value: [{ name: "文科", value: 95 }, { name: "理科", value: 82 }]
          },
          {
            name: "天津",
            value: [{ name: "文科", value: 22 }, { name: "理科", value: 20 }]
          },
          {
            name: "河北",
            value: [{ name: "文科", value: 60 }, { name: "理科", value: 42 }]
          },
          {
            name: "山西",
            value: [{ name: "文科", value: 40 }, { name: "理科", value: 41 }]
          },
          {
            name: "内蒙古",
            value: [{ name: "文科", value: 23 }, { name: "理科", value: 24 }]
          },
          {
            name: "辽宁",
            value: [{ name: "文科", value: 39 }, { name: "理科", value: 28 }]
          },
          {
            name: "吉林",
            value: [{ name: "文科", value: 41 }, { name: "理科", value: 41 }]
          },
          {
            name: "黑龙江",
            value: [{ name: "文科", value: 35 }, { name: "理科", value: 31 }]
          },
          {
            name: "上海",
            value: [{ name: "文科", value: 12 }, { name: "理科", value: 12 }]
          },
          {
            name: "江苏",
            value: [{ name: "文科", value: 47 }, { name: "理科", value: 45 }]
          },
          {
            name: "浙江",
            value: [{ name: "文科", value: 57 }, { name: "理科", value: 57 }]
          },
          {
            name: "安徽",
            value: [{ name: "文科", value: 57 }, { name: "理科", value: 52 }]
          },
          {
            name: "福建",
            value: [{ name: "文科", value: 59 }, { name: "理科", value: 57 }]
          },
          {
            name: "江西",
            value: [{ name: "文科", value: 49 }, { name: "理科", value: 42 }]
          },
          {
            name: "山东",
            value: [{ name: "文科", value: 67 }, { name: "理科", value: 52 }]
          },
          {
            name: "河南",
            value: [{ name: "文科", value: 69 }, { name: "理科", value: 68 }]
          },
          {
            name: "湖北",
            value: [{ name: "文科", value: 60 }, { name: "理科", value: 56 }]
          },
          {
            name: "湖南",
            value: [{ name: "文科", value: 62 }, { name: "理科", value: 52 }]
          },
          {
            name: "重庆",
            value: [{ name: "文科", value: 47 }, { name: "理科", value: 44 }]
          },
          {
            name: "四川",
            value: [{ name: "文科", value: 65 }, { name: "理科", value: 60 }]
          },
          {
            name: "贵州",
            value: [{ name: "文科", value: 32 }, { name: "理科", value: 30 }]
          },
          {
            name: "云南",
            value: [{ name: "文科", value: 42 }, { name: "理科", value: 41 }]
          },
          {
            name: "西藏",
            value: [{ name: "文科", value: 5 }, { name: "理科", value: 4 }]
          },
          {
            name: "陕西",
            value: [{ name: "文科", value: 38 }, { name: "理科", value: 42 }]
          },
          {
            name: "甘肃",
            value: [{ name: "文科", value: 28 }, { name: "理科", value: 28 }]
          },
          {
            name: "青海",
            value: [{ name: "文科", value: 5 }, { name: "理科", value: 5 }]
          },
          {
            name: "宁夏",
            value: [{ name: "文科", value: 10 }, { name: "理科", value: 8 }]
          },
          {
            name: "新疆",
            value: [{ name: "文科", value: 36 }, { name: "理科", value: 31 }]
          },
          {
            name: "广东",
            value: [{ name: "文科", value: 63 }, { name: "理科", value: 60 }]
          },
          {
            name: "广西",
            value: [{ name: "文科", value: 29 }, { name: "理科", value: 30 }]
          },
          {
            name: "海南",
            value: [{ name: "文科", value: 8 }, { name: "理科", value: 6 }]
          }
        ];

        /*获取地图数据*/
        let myChart = this.$echarts.init(document.getElementById("map"));
        // myChart.showLoading();
        var mapFeatures = this.$echarts.getMap(mapName).geoJson.features;
        // myChart.hideLoading();
        mapFeatures.forEach(function(v) {
          // 地区名称
          var name = v.properties.name;
          // 地区经纬度
          geoCoordMap[name] = v.properties.cp;
        });
        console.log(data);
        console.log(toolTipData);
        var max = 480,
          min = 9; // todo
        var maxSize4Pin = 100,
          minSize4Pin = 20;

        var convertData = function(data) {
          var res = [];
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name];
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
              });
            }
          }
          return res;
        };
        var option = {
          tooltip: {
            trigger: "item",
            formatter: function(params) {
              if (typeof params.value[2] == "undefined") {
                var toolTiphtml = "";
                for (var i = 0; i < toolTipData.length; i++) {
                  if (params.name == toolTipData[i].name) {
                    toolTiphtml += toolTipData[i].name + ":<br>";
                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                      toolTiphtml +=
                        toolTipData[i].value[j].name +
                        ":" +
                        toolTipData[i].value[j].value +
                        "<br>";
                    }
                  }
                }
                console.log(toolTiphtml);
                // console.log(convertData(data))
                return toolTiphtml;
              } else {
                var toolTiphtml = "";
                for (var i = 0; i < toolTipData.length; i++) {
                  if (params.name == toolTipData[i].name) {
                    toolTiphtml += toolTipData[i].name + ":<br>";
                    for (var j = 0; j < toolTipData[i].value.length; j++) {
                      toolTiphtml +=
                        toolTipData[i].value[j].name +
                        ":" +
                        toolTipData[i].value[j].value +
                        "<br>";
                    }
                  }
                }
                console.log(toolTiphtml);
                // console.log(convertData(data))
                return toolTiphtml;
              }
            }
          },
          // legend: {
          //     orient: 'vertical',
          //     y: 'bottom',
          //     x: 'right',
          //     data: ['credit_pm2.5'],
          //     textStyle: {
          //         color: '#fff'
          //     }
          // },
          visualMap: {
            show: true,
            min: 0,
            max: 200,
            left: 610,
            bottom: 10,
            text: ['高', '低'], // 文本，默认为数值文本
            calculable: true,
            seriesIndex: [1],
            textStyle:{color:'#fff'},
            inRange: {
              // color: ['#3B5077', '#031525'] // 蓝黑
              // color: ['#ffc0cb', '#800080'] // 红紫
              // color: ['#3C3B3F', '#605C3C'] // 黑绿
              // color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
              // color: ['#23074d', '#cc5333'] // 紫红
              color: ['#00467F', '#A5CC82'] // 蓝绿

              // color: ['#1488CC', '#2B32B2'] // 浅蓝
              // color: ['#00467F', '#A5CC82'] // 蓝绿
              // color: ['#00467F', '#A5CC82'] // 蓝绿
              // color: ['#00467F', '#A5CC82'] // 蓝绿
              // color: ['#00467F', '#A5CC82'] // 蓝绿
            }
          },
          geo: {
            show: true,
            map: mapName,
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            roam: true,
            itemStyle: {
              normal: {
                areaColor: "#031525",
                borderColor: "#3B5077"
              },
              emphasis: {
                areaColor: "#2B91B7"
              }
            }
          },
          series: [
            {
              name: "散点",
              type: "scatter",
              coordinateSystem: "geo",
              data: convertData(data),
              symbolSize: function(val) {
                return val[2] / 10;
              },
              label: {
                normal: {
                  formatter: "{b}",
                  position: "right",
                  show: true
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: "#05C3F9"
                }
              }
            },
            {
              type: "map",
              map: mapName,
              geoIndex: 0,
              aspectScale: 0.75, //长宽比
              showLegendSymbol: false, // 存在legend时显示
              label: {
                normal: {
                  show: true
                },
                emphasis: {
                  show: false,
                  textStyle: {
                    color: "#fff"
                  }
                }
              },
              roam: true,
              itemStyle: {
                normal: {
                  areaColor: "#031525",
                  borderColor: "#3B5077"
                },
                emphasis: {
                  areaColor: "#2B91B7"
                }
              },
              animation: false,
              data: data
            },
            {
              name: "点",
              type: "scatter",
              coordinateSystem: "geo",
              symbol: "pin", //气泡
              symbolSize: function(val) {
                var a = (maxSize4Pin - minSize4Pin) / (max - min);
                var b = minSize4Pin - a * min;
                b = maxSize4Pin - a * max;
                return a * val[2] + b;
              },
              label: {
                normal: {
                  show: true,
                  textStyle: {
                    color: "#fff",
                    fontSize: 9
                  }
                }
              },
              itemStyle: {
                normal: {
                  color: "#F62157" //标志颜色
                }
              },
              zlevel: 6,
              data: convertData(data)
            },
            {
              name: "Top 5",
              type: "effectScatter",
              coordinateSystem: "geo",
              data: convertData(
                data
                  .sort(function(a, b) {
                    return b.value - a.value;
                  })
                  .slice(0, 5)
              ),
              symbolSize: function(val) {
                return val[2] / 10;
              },
              showEffectOn: "render",
              rippleEffect: {
                brushType: "stroke"
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: "{b}",
                  position: "right",
                  show: true
                }
              },
              itemStyle: {
                normal: {
                  color: "yellow",
                  shadowBlur: 10,
                  shadowColor: "yellow"
                }
              },
              zlevel: 1
            }
          ]
        };
        myChart.setOption(option);
      })
    }
  }

</script>

<style lang="less" scoped>
  .headerbackgroud{
    background-image: url("../../../../assets/screen-header.jpg");
  }
  #text{
    -webkit-text-fill-color:white
  ;
  }
  .select{
    color: white;
  }
  .hello{
    // 未选中任何选项的时候 placeholder的样式 需要先选中父元素 增加权重
    /deep/ input::-webkit-input-placeholder {
      color: #fff;
    }
    /deep/  input::-moz-input-placeholder {
      color: #fff;
    }
    /deep/  input::-ms-input-placeholder {
      color: #fff;
    }

    //修改的是el-input的样式
    //一种方法是设置最里层el-input__inner的背景色 外层的两级父元素设置为透明色
    //另一种方法是从el-select到el-input__inenr的背景色都设置为需要的颜色
    /deep/ .el-select,
    /deep/ .el-input,
    /deep/ .el-input__inner{
      background-color:#08164D ;
      color:#fff;
      border:0px;
      border-radius:0px;
      text-align: center;
    }
  }
  #allmap{
    height: 90%;
    width: 90%;

    position:center;
  }
</style>
